import React, { Component } from 'react';
import { TouchableOpacity, TextInput, View, Text, StyleSheet, Modal, SafeAreaView, Button } from 'react-native';
import ModalDropdown from 'react-native-modal-dropdown';
import Ionicons from 'react-native-vector-icons/Ionicons';
export default class Report extends Component {
	constructor(props) {
		super(props);
		this.state = {

			show1: false,
			data1: ['Age Discrimnation', 'Disablity', 'RaceXX'],
			data1_v: 'Age Discrimnation',
			show2: false,
			data2: ['Harassment', 'Direct Discrimnation', 'Failure to make...'],
			data2_v: 'Harassment',
			text: ''


		};
	}

	componentDidMount() {
		
	}

	componentDidUpdate() { }
	onChangeText(e) {

	}
	go_map(){
		if(!this.state.text) {
           alert('Please enter the location')
		}else{
			// this.props.navigation.navigate('');
			this.props.navigation.navigate('MapScreen');
		}

	}

	render() {
		const { show1, data1, data1_v, show2, data2, data2_v, } = this.state;
		return (
			<SafeAreaView>
				<View
					style={{
						width: '50%',
						height: '95%',
						justifyContent: 'center',
						alignSelf: 'center',
						alignContent: 'center',
						alignItems: 'center',
					}}>

					<Text style={{ width: 300, marginBottom: 10 }}>incident:</Text>

					<ModalDropdown options={data1}  isFullWidth="true" style ={{width:300,backgroundColor:'white',padding:10}} />
					
					<Text style={{ width: 300, marginTop: 20 }}>incident details:</Text>
					
						<ModalDropdown options={data2} isFullWidth="true" style ={{width:300,backgroundColor:'white',padding:10,marginTop:30}} />
					
					<Text style={{ width: 300, marginTop: 20 }}> Location</Text>
					{/* <TouchableOpacity onPress={() => {
					}}> */}

						<View style={{ width: 300, backgroundColor: 'white', padding: 5, marginTop: 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
							<TextInput
								style={{ height: 40, width: 220, borderColor: 'gray', borderWidth: 1, padding: 5 }}
								onChangeText={text => this.setState({ text: text })}

							/>
							<Ionicons
								name='search'
								size={30}
								color='#000'
								onPress={()=>{
									this.go_map()
								}}
							/>
						</View>



					{/* </TouchableOpacity> */}

					<TouchableOpacity>
						<View style={styles.add_btn}><Text style={{ fontSize: 18, color: 'white' }}>confirm Report</Text></View>
					</TouchableOpacity>

				
				</View>
			</SafeAreaView>
		);
	}
}

const styles = StyleSheet.create({
	add_btn: {
		width: 300,
		backgroundColor: '#1E90FF',
		padding: 10,
		marginTop: 30,
		color: '#FFFFFF',
		fontSize: 20

	},
	centeredView: {
		flex: 1,
		justifyContent: "center",
		alignItems: "center",
		marginTop: 22
	},
	md: {
		width: 200,
		height: 500
	},
	btn: {
		backgroundColor: 'white',
		width: 300,
		height: 30,
		borderRadius: 5,
		fontSize: 18,
		fontWeight: '500'
	},
	center: {
		alignItems: 'center',
		justifyContent: 'center'

	}

})